<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
          integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>
<body>
<div id="app">
    <!--传递父组件方法-->
    <cmt-box @reload-comment="reload"></cmt-box>
    <div class="container mt-lg-5">
        <div class="list-group">
            <a href="#"
               v-for="(item, i) in comments" :key="item.id"
               class="list-group-item list-group-item-action">
                <div class="d-flex w-100 justify-content-between">
                    <h5 class="mb-1">{{item.user}}</h5>
                    <small>{{item.user}} say.</small>
                </div>
                <p class="mb-1">{{item.content}}</p>
                <small>{{item.createTime}}</small>
            </a>
        </div>
    </div>
</div>

<template id="cBoxTpl">
    <div class="container mt-lg-5">
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text" id="basic-addon1">用户</span>
            </div>
            <input type="text" v-model="user" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
        </div>
        <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text">内容</span>
            </div>
            <textarea class="form-control" aria-label="内容" v-model="content"></textarea>
        </div>
        <div class="container text-right mt-lg-2">
            <input type="button" class="btn btn-primary" @click="postComment" value="提交">
        </div>
    </div>
</template>

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
    let commentBox = {
        template: '#cBoxTpl',
        data() {
            return {
                user: '',
                content: '',
                createTime: ''
            }
        },
        methods: {
            postComment() {
                let c = {id: Date.now(), user: this.user, content: this.content, createTime: new Date().toLocaleString()};
                // 取出本地存储的数据，localStorage只能存储字符串，所以取出来要解析为json
                // || 或操作符保证取出没有值时，使用 [] 防止解析出错
                let comments = JSON.parse(localStorage.getItem('comments') || "[]");
                // 加到最上面，push加到最下面
                comments.unshift(c);
                // 存到本地存储
                localStorage.setItem('comments', JSON.stringify(comments));
                // 重置
                this.user = this.content = this.createTime = '';
                // 调用父组件方法重新加载数据
                this.$emit('reload-comment');
            }
        }
    };
    var vm = new Vue({
        el: '#app',
        data: {
            comments: []
        },
        methods: {
            reload() {
                this.comments = JSON.parse(localStorage.getItem('comments') || "[]");
            }
        },
        components: {
            'cmt-box' : commentBox
        },
        created() {
            this.reload()
        }
    });
</script>
</body>
</html>
